<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>
    <meta charset="utf-8">
</head>
<body>
<style type="text/css">
    .x-attachment-list{
        overflow: auto;
    }

    .x-attachment-list.table td{
        vertical-align: middle;
    }
    .x-attachment-list .glyphicon-remove{
        color:red;
    }

    .x-attachment-list .glyphicon{
        cursor: pointer;
    }

    .x-attachment-list>.x-attachment-toolbar{
        display: table;
        height:42px;

    }
    .x-attachment-list>.x-attachment-toolbar>div{
        display: table-cell;
        vertical-align:middle;
    }

    .x-attachment-title{
        padding-left: 8px;
        width:100%;
    }

    .x-attachment-upload{
        border-left: #eaeaea solid 1px;width:55px;white-space: nowrap;padding: 0 8px 0 0;
    }

    .x-attachment-upload-btn{
        text-align:center;width: 55px;border-left: #eaeaea solid 1px;cursor: pointer;color: #3b95d3;
    }




    .x-attachment-list table{
        margin-bottom: 0;
    }

</style>
<div class="x-attachment-list">
    <div class="x-attachment-toolbar">
        <div class="x-attachment-title">选择文件上传</div>
        <div class="x-attachment-upload">
            <div class="x-attachment-upload-btn">上传</div>
        </div>
    </div>
    <table class="x-attachment-list table table-hover">
        <tbody>
        <tr>
            <td><img src="./other.png" alt=""/></td>
            <td>chrome111111111111111111111111111111111111111111.dll</td>
            <td>
                <span class="glyphicon glyphicon-pencil"></span>
            </td>
            <td>
                <span class="glyphicon glyphicon-remove"></span>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="x-attachment-processbar">
        <div class="progress-bar" role="progressbar"/>
    </div>
</div>

</body>
</html>